<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火山GIN中间件功能演示之Gzip&CORS</title>
</head>

<body>
    <h2>1.Gzip资源压缩</h2>
    <p>当前页面<span id="isencoding"></span></p>
    <p>页面内容长度为：<span id="len"></span></p>
    <p><span id="noencodelen"></span></p>
    <p>详情查看响应头 Content-Encoding 和 Content-Length 字段</span></p>
    <hr>
    <h2>2.跨域资源共享（CORS）</h2>
    <p>当 协议 地址 和端口 均一致时则为同源请求否则为跨域请求</p>
    <p>当前origin为 <span id="currentOrigin"></span> 与目标地址为 <span id="targetAddr"></span></p>
    <p>切换到不同的源 <a href="http://127.0.0.1:8080">127.0.0.1 </a> - <a href="http://127.0.0.2:8080">127.0.0.2</a> - <a
            href="http://127.0.0.3:8080">127.0.0.3</a> - <a href="http://localhost:8080">localhost</a></p>
    <p>点击发送测试下列请求</p>
        <ul>
        <li>GET演示：向 http://127.0.0.1:8080/cors 发送一个GET请求 <button onclick="get()">发送</button><span id="getres"></span>
        <li>POST演示：向 http://127.0.0.1:8080/cors 发送一个POST请求 <button onclick="post()">发送</button><span
                id="postres"></span>
        <li>PUT演示：向 http://127.0.0.1:8080/cors 发送一个PUT请求 <button onclick="put()">发送</button><span id="putres"></span>
        <li>允许所有来源：向 http://127.0.0.1:8080/allorigin 发送一个GET请求 <button onclick="allorigin()">发送</button><span
                id="alloriginget"></span>
        </li>
    </ul>
    <hr>
    <h2>3.缓存演示（cache）</h2>
    <p> <a target="_blank" href="/cache">页面缓存演示 </a> - <a target="_blank" href="/cacheoperations">缓存操作演示</a> </p>
</body>
<script>
    currentOrigin.innerHTML = window.location.origin
    targetAddr.innerHTML = window.location.origin === "http://127.0.0.1:8080" ? "同源" : "跨域"
    targetAddr.style.color = window.location.origin === "http://127.0.0.1:8080" ? "green" : "red"
    const targetUrl = "http://127.0.0.1:8080/cors"
    const allorigin = async function () {
        alloriginget.innerHTML = ""
        try {
            const response = await fetch("http://127.0.0.1:8080/allorigin")
            if (response.ok) {
                const data = await response.text()
                alloriginget.innerHTML = " 请求成功 返回数据为：" + data
            }
        } catch (error) {
            alloriginget.innerHTML = " 请求失败"
        }
    };
    const get = async function () {
        getres.innerHTML = ""
        try {
            const response = await fetch(targetUrl)
            if (response.ok) {
                const data = await response.text()
                getres.innerHTML = " 请求成功 返回数据为：" + data
            }
        } catch (error) {
            getres.innerHTML = " 请求失败"
        }
    };
    const post = async function () {
        postres.innerHTML = ""
        try {
            const response = await fetch(targetUrl, {
                method: "POST",
                body: JSON.stringify({}),
                headers: {
                    "test": "123",
                },
            })
            if (response.ok) {
                const data = await response.text()
                postres.innerHTML = " 请求成功 返回数据为：" + data
            }
        } catch (error) {
            postres.innerHTML = " 请求失败"
        }
    };
    const put = async function () {
        putres.innerHTML = ""
        try {
            const response = await fetch(targetUrl, {
                method: "PUT"
            })
            if (response.ok) {
                const data = await response.text()
                putres.innerHTML = " 请求成功 返回数据为：" + data
            }
        } catch (error) {
            putres.innerHTML = " 请求失败"
        }
    };

    async function checkResponseEncodingAndLength(url) {
        try {
            const response = await fetch(url);

            if (response.headers.has('Content-Encoding')) {
                const encoding = response.headers.get('Content-Encoding');
                isencoding.innerHTML = `内容使用了${encoding}压缩`;

            } else {
                isencoding.innerHTML = `内容未使用压缩`;
            }
            if (response.headers.has('Content-Length')) {
                const contentLength = parseInt(response.headers.get('Content-Length'), 10);
                len.innerHTML = ` ${contentLength} 字节`;
            }

            if (response.headers.has('Noencode-Length')) {
                const length = response.headers.get('Noencode-Length');
                noencodelen.innerHTML = `压缩前内容长度为: ${length} 字节`;
                console.log(length);
            }

        } catch (error) {
            console.error(`检查${url}时发生错误:`, error);
        }
    }
    checkResponseEncodingAndLength("/")
</script>
</html>
</body>
</html>